<template>
  <div id="homexall">
    
    <div style="margin-bottom:3vw">
      <router-link to='/details' style="display:flex;align-items: center">
      <van-icon name="comment-o" size="6vw" color='rgb(188,39,46)' style="margin-right:2vw"/><strong style="color:rgb(188,39,46);font-size:4vw">一图看懂义务教育入学流程</strong>
      </router-link>
    </div>
    <div style="margin-bottom:5vw">
      <van-cell is-link @click='showPopup'>
        <p style="text-align:center;font-size:5vw"><button id='btn'>点击立即开始办理</button></p>
      </van-cell>
      <van-popup v-model="show">
        <div id='popup-city'>
          <router-link v-for="(item,i) in plot" :key="i" :to="`/city?id=${item.pid}`">
            {{item.pname}}
          </router-link>
      </div> 
        <div id='close'>
          <button @click="close">取消</button>
        </div>
      </van-popup>
    </div>
    <div id='tplan'>
      <p id='plantitle'>2021年义务教育小学阶段入学工作时间安排</p>
      <ul>
        <li :v-model="index" @click="dianji()" index='1'>
          <span></span>
          <div>
            <p>5.28</p>
          </div>
          <div>
            <p id="tplanfont">河南省义务教育招生入学工作通知正式发布</p>
          </div>
        </li>
        <li :v-model="index" @click="dianji()" index='2'>
          <span></span>
          <div>
            <p>8.6-8.7</p>
          </div>
          <div>
            <p id="tplanfont">线上报名</p>
          </div>
        </li>
        <li :v-model="index" @click="dianji()" index='3'>
          <span></span>
          <div>
            <p>8.21-8.22</p>
          </div>
          <div>
            <p id="tplanfont">现场报名</p>
          </div>
        </li>
      </ul>
    </div>
    <div id="indexmanual">
      <router-link to='/login'>
        <div>
          <van-tag text-color='white' color="rgb(188,39,46)" size="large" style='height:8vw;width:20vw;font-size:4vw'>本市户籍</van-tag><span>适龄儿童操作手册</span>
        </div>
      </router-link>
      <router-link to='/login'>
        <div>
          <van-tag text-color='white' color="rgb(188,39,46)" size="large" style='height:8vw;font-size:4vw'>非本市户籍</van-tag><span>适龄儿童操作手册</span>
        </div>
      </router-link>
      
      <router-link to='/login'>
        <div>
          <span>义务教育入学阶段有关问答</span>
        </div>
      </router-link>
    </div>

    <div id='policy'>
      <p>相关政策</p>
        <div id="policy-nav">
          <p>市级政策</p>
          <router-link to='/policy'>
            <div id="policy-city">
              <p>郑州市区小学招生政策发布 8月6日开始报名</p>
              <span>2021-05-28</span>
            </div>
          </router-link>
        </div>
    </div>
    <!-- <div v-for="(item,i) in plot" :key="i">
      {{item.pname}}
    </div> -->
  </div>
</template>


<script>
export default {
  data(){
    return{
      plot:[],
      index:-1,
      show:false
    } 
  },
  methods:{
    dianji(){
        var lis=document.getElementsByTagName('li');
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute("index",i);
            lis[i].onclick=function(){
                for(var i=0;i<lis.length;i++){
                    if(this.getAttribute("index")==i){
                        lis[i].style.fontWeight="bolder";
                    }else{
                        lis[i].style.fontWeight="";
                    }
                }
            }
        }
    },
    showPopup(){
      this.show=true;
    },
    close(){
      this.show=false;
    }

  },
  mounted(){
    this.axios.get('/plot').then((result)=>{
      console.log(result)
      // 把类别列表存入data， 
      // 在template中使用v-for遍历输出导航item
      this.plot = result.data.results
    })
  }
}
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
#homexall{
  width: 90%;
  padding-left: 5%;
}
.van-icon-arrow::before{
  content:''
}
.van-popup{
  width: 90%;
  height: 95%;
  border-radius: 5vw;
}
#popup-city{
  height: 90%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
  margin: 0 10vw;
  text-align: center;
  border-bottom: 1px solid black;
}
#close>button{
  margin-top: 5vw;
  float: right;
  width: 15vw;
  height: 8vw;
  border-radius: 2vw;
  border: none;
  margin-right: 10vw;
}
#popup-city>a{
  height: 15vw;
  width: 30vw;
  line-height: 15vw;
  font-size:5vw ;
  color: #bc272e;
  background-color: #fcf5f5;
}
.tran{
  font-size: 4vw;
}
#btn{
  background:linear-gradient(to right,rgb(169,22,29),rgb(205,44,52));
  border-radius: 4vw;
  border: none;
  height: 15vw;
  width: 100%;
  color: white;
}
.van-cell{
  padding: 0;
}
#tplan{
  text-align: left;
}
#tplan #plantitle{
  font-size: 4.9vw;
}
#tplan ul li{ 
  margin-top: 3vw;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row
}
#tplan ul li span{
  width: 5vw;
  height: 5vw;
  background-color: pink;
  border-radius: 50%;
  margin-right: 2vw;
}
#tplan ul li p{
  font-size: 4vw;
}
#tplan ul li span+div{
  width: 17vw;
  display: inline-block;
}
#tplan ul li div+div{
  width: 59vw;
  height: 10vw;
  margin-left: 3vw;
  padding: 2vw;
  text-align: left;   
  display: inline-block;
  background-color: rgb(248, 234, 235);
  color:rgb(201,39,101);
  border-radius: 4vw;
  display: flex;
  align-items: center;
}
#indexmanual{
  margin-top: 15vw;
  font-size:4vw
}
#indexmanual div{
  border-bottom: 1px solid rgb(228, 227, 227);
  padding: 8vw;
}
#indexmanual div span{
  color: black;
}
#policy{
  margin-top: 5vw;
  margin-bottom: 10vw;
}
#policy p{
  font-size: 6vw;
}
#policy-nav>p{
  margin-top: 5vw;
  font-size: 5vw;
  color: #bc272e;
  font-weight: bold;
  width: 20vw;
  border-bottom: solid #bc272e 1vw;
}
#policy-city{
  margin-top: 5vw;
  padding-bottom: 4vw;
  border-bottom: 1px solid grey;
}
#policy-city p{
  font-size: 4vw;
  color: black;
}
#policy-city span{
  font-size: 3vw;
  color: #999;
}
</style>